<template>
	<view class="login">
		<navbar title="用户登录" />

		<view class="info">
			<view class="info-desc">
				请同意仔细阅读
				<text class="info-desc-tip">《隐私协议》</text>
				和
				<text class="info-desc-tip">《用户协议》</text>
				，并同意用户信息授权以登录
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="info-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber">注册/登录</button>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<button class="info-btn" type="primary" @tap="handleGetUserProfile">注册/登录</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script setup>
	import useLoginStore from '@/stores/login/login.js';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';

	// - store
	const loginStore = useLoginStore();

	// - data
	const code = ref();

	// - methods
	const handleGetPhoneNumber = (e) => {
		const { iv, encryptedData, errMsg } = e.detail;

		if (iv && encryptedData) {
			const payload = { code: code.value, iv, encryptedData };

			// #ifdef MP-WEIXIN
			loginStore.loginAction('wx', payload);
			// #endif

			// 抖音获取手机号需要管理员申请
			// // #ifdef MP-TOUTIAO
			// loginStore.loginAction('dy', payload);
			// // #endif

			uni.navigateBack();
		} else {
			console.log('获取用户手机号码失败', errMsg);
		}
	};
	const handleGetUserProfile = () => {
		tt.getUserInfo({
			withCredentials: true,
			success(res) {
				const { iv, encryptedData } = res;
				loginStore.loginAction('dy', { code: code.value, iv, encryptedData });
				uni.navigateBack();
			},
			fail(err) {
				console.log('获取用户信息失败', err);
			}
		});
	};

	onLoad((options) => {
		code.value = options.code;
	});
</script>

<style lang="scss">
	.login {
		position: relative;
		overflow: hidden;
		height: 100vh;
		background: linear-gradient(to bottom, #ffe4e1, #ffffff);
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.info {
			box-sizing: border-box;
			padding: 0 40rpx;

			.info-desc {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;

				.info-desc-tip {
					color: #ff5f04;
					text-decoration: underline;
				}
			}

			.info-btn {
				margin-top: 40rpx;
			}
		}
	}
</style>
